PROJECT DESCRIPTION
I was instructed to redesign the website for Loup County, Nebraska (current site:http://www.co.loup.ne.us/)
The site will need to house information for county residents and be organized in a way that enables them to find the information quickly. It will need to be designed to present large amounts of information clearly and concisely.
STEP 1: RESEARCH
Research Notes: The current Loup County website needs an overhaul. Not only is it boring, but it is difficult for the user to navigate. The typography is boring, color scheme is basic and the information the user needs is hard to find.
STEP 2: RESEARCH - GOOD WEBSITE DESIGNS
Research Notes: The Orange County website has a very clean homepage. It is clear and easy to understand. I really like the search bar that is large and center, one of the first things the user will see when they first arrive at the website. The search bar will allow the user to quickly find what they are looking for on the website and accomplish the task they desire.
STEP 3: RESEARCH - BAD WEBSITE DESIGNS
Research Notes: The Los Angeles county website has some aspects of good design and some aspects of bad design. The site is very cluttered and lacks obvious visual hierarchy. The colors are very bright and bold, but the site has too much color and sections and lacks white space. The typography is all over the place and isn't consistent. The site does have a navigation bar that is easy to use, but contains a lot of options. The search bar is very small and is part of the navigation bar. It took me a much longer time to find the search bar than it should've.
STEP 4: RESEARCH - INFORMATION ARCHITECTURE
Notes: The rise of the internet in the 1990s led to websites that were unorganized and hard to use. This led to usability disasters, problems with content management and costly redesigns. The people started to realize that websites needed to be planned out and organized in order to be successful. Over time, information architecture evolved to envelop the structural design of information systems, user experiences and interactive services. It is basically the organization that helps users navigate websites and software to complete tasks easily.
Information architects work to make interfaces more usable, useful, findable, valuable, credible, desirable and accessible. They do so by employing sitemaps, wireframes and a myriad of tools and ideas to study users and further improve usability, clarity and ease of use. Information architects make maps for mobile and cross channel services and experiences that also map the customer journey, model system dynamics and analyze impacts upon business processes, incentives and organization.
In short, Information architecture (IA) is the practice of organizing and labeling content in a way that is effective and lasting. It is imperative that users can find information and complete their desired tasks. In order to do so, they must be able to find all the information they need. It is our job as designers to organize the content in a way that users can easily find everything they need and complete all tasks necessary. To do so, we need to understand how all pieces fit together and relate to each other within the system.
The purpose of IA is to help users understand where they are, what they are looking at, what they should expect and what else is on the page.
STEP 5: TYPOGRAPHY ON THE WEB
Notes: Typography is extremely important in the success or failure of a website or app. Over 90% of information online is in text form. That text needs to be well designed and laid out so that it is easy for the user to understand the flow of information as well as the words themselves.
To be successful in typography, one needs to understand the basics. A typeface is another word for a font family. It refers to the faces of the letter blocks. Each typeface contains fonts of various weights that all share the same style. Some of the most common typefaces are Arial, Times New Roman, Helvetica, Futura, Bodoni, Century, Optima, and Baskerville.
A font is a specific weight within a typeface. For example, Arial bold is a font within the Arial typeface. A typical project will contain 2-3 fonts. These fonts will make up the typography of the project and be a key element of the overall design. Typically, a design will be made up of at least one serif and one sans-serif typeface. Serif means that each glyph has little strokes or foot-like elements connected to main parts of each letter. Sans-serif typefaces do not have the strokes, otherwise known as serifs.
Some other important typography keywords are baseline, x-height and stroke. The baseline is the invisible bottom line on which all letters sit. The x-height is the distance between the baseline and the height of the lowercase letter "x". The x-height will typically be the height of most letters of the font, but not always. A stroke is a line, straight or curved, that makes up the main part of a letter.
It is important that hierarchy is utilized in typography as well as alignment and white space. Hierarchy is the principle of arranging elements in order of importance. Typically the largest heading on each page is a specific font, weight and size. This would be known as h1. This same font with the specific weight and size would be repeated on each web page for the main heading. The next most important headings would be represented with h2 and would be a smaller font, with its own weight and size. This pattern repeats with the next most important text as h3 and so on.
There is much more to typography than just choosing a font. It is fundamental to creating a positive user experience.
STEP 6: SKETCHES
Notes: I definitely like sketching with the mobile-first approach. I feel like the smaller surface area really forces me to have to determine what the basic needs of the user are and really simplify my thoughts. I definitely want to have a search bar in the middle of the homepage so that the user can search for the portion of the site that they need.
Notes: I think the desktop site will be the most efficient if it is just as simple as the mobile site, just laid out in a slightly different way that will be more conducive to computers.
STEP 7: WIREFRAMES
STEP 8: USER FLOW CHART
STEP 9: SCENARIOS
SCENARIO 1
You are a registered voter and it is voting day. Use the website to find your assigned voting location.
SCENARIO 2
You are a small business owner. Use the website to file taxes for your small business.
SCENARIO 3
Your 16th birthday is coming up and you can't wait to get your driver's license. Use the website to sign up to take your driver's test and find out what you need to bring with you.
STEP 10: USABILITY TESTING - WIREFRAMES
USER 1
Waylon, Developer: Waylon was able to get to the voting location screen, but was not able to complete the task and find his own voting location. He tried to click on the search bar to search for his voting location, but the bar wasn't clickable and doesn't function yet. He had a few comments overall: "The layout is good. I would recommend making sure the desktop layout has a more desktop-like navigation bar rather than just making the mobile navigation bar larger. There are a lot of things I wanted to click, but couldn't."
USER 2
Ruth, Artist: Ruth was not able to find the place to file taxes for a small business. With help and direction from me, she was able to get to the right menu, but when she tried to click on the button to go to the page to file her taxes, nothing happened. Regarding the design of the website she said, "I like it, but it is so boring! Add color. Make it pop!"
USER 3
Colby, High School Student: Colby was able to quickly and easily find the interface with drivers test information. He was able to find the things that he needs to bring to the dmv, but was not able to schedule his appointment because the feature wasn't working yet.
TESTING CONCLUSIONS
From this first round of user testing, it is obvious that I need to make sure the website functions so that my user testers can actually complete the tasks I am asking them to complete. I also learned that color is important. I need to add a lot of photos and "pops" of color. I also need to make everything clickable and change the desktop navigation to be more desktop-friendly.
STEP 11: ITERATION 2
Revision Comments:
· I added photos, icons, dummy data and logos
· I added shading for additional dimension.
· I improved spacing and font sizes.
STEP 12: USABILITY TESTING - ITERATION 2
USER 1
Waylon, Developer: Waylon was able to get to the voting location screen and find the place to search for his own voting precinct. He had a few comments overall: "The layout is good. I would recommend making sure the desktop layout has a more desktop-like navigation bar rather than just making the mobile navigation bar larger. There are a lot of things I wanted to click, but couldn't."
USER 2
Ruth, Artist: Ruth was able to find the place to file taxes for a small business. She was able to complete the task two different ways, but each required more clicks than I would prefer.
USER 3
Colby, High School Student: Colby was able to quickly and easily find the interface with drivers test information. He was able to find the things that he needs to bring to the dmv and was able to find the appointment scheduler tool.
TESTING CONCLUSIONS
From the second round of user testing, I learned that I need to improve the navigation so that it is even easier for my users to complete their tasks--preferably with less clicks. I need to change the desktop navigation to reflect more of a desktop site and adjust a lot of the sizing and spacing.
STEP 13: ITERATION 3
Iteration Comments:
· I added photos, icons, dummy data and logos
· I added shading for additional dimension.
· I improved spacing and font sizes.
· I changed the desktop navigation bar to reflect a desktop site.
· I added additional pages for building permits and applications.
STEP 14: ITERATION 3 - PROTOTYPE
STEP 15: FINAL DESIGNS
STEP 16: CONCLUSION
I really enjoyed the redesign of the Loup County website. After many rounds of user testing and revisions, I feel confident with my design for the website. I learned a lot about the importance of feedback, conventions, and animations through the course of this design.
